<script setup lang="jsx">
const navList = [
  {
    path: '/',
    title: '首页',
  },
  {
    path: '/list',
    title: '列表',
  },
  {
    path: '/form',
    title: '表单',
  },
  {
    path: '/store',
    title: 'PiniaStore',
  },
  {
    path: '/store2',
    title: 'HooksStore2',
  },
]
const { route, } = useNavigation()
const userInfoStore = useUserInfo()
const userInfoStore2 = useUserInfo2()
const renderBlock = ({ content, title = '', }) => {
  return (
    <div
      style={{
        backgroundColor: '#eee',
        marginBottom: '10px',
        padding: '10px',
      }}
    >
      {!!title && (
        <div
          style={{ fontWeight: 'bold', }}
        >
          {title}
        </div>
      )}
      {content?.()}
    </div>
  )
}
defineRender(() => {
  return (
    <div
      style={{
        lineHeight: '2',
        margin: '30px auto',
        width: '1000px',
      }}
    >
      <header>
        {navList.map((item, i) => {
          const isActive = route.path == item.path
          return (
            <RouterLink
              key={i}
              style={{ color: isActive ? '#00bd7e' : '#555', }}
              to={item.path}
            >
              {item.title}
            </RouterLink>
          )
        })}
      </header>
      {renderBlock({
        content: () => {
          return <RouterView />
        },
        title: '路由页面',
      })}
      {renderBlock({
        content: () => {
          return (
            <div>
             userInfo: {userInfoStore.userInfo.name}<br/>
                count：{userInfoStore.count}
            </div>
          )
        },
        title: 'pinia store',
      })}
      {renderBlock({
        content: () => {
          return (
            <div>
             userInfo: {userInfoStore2.state.userInfo.name}<br/>
                count：{userInfoStore2.state.count}
            </div>
          )
        },
        title: 'hooks store2',
      })}

    </div>
  )
})
</script>

<style lang="scss" scoped>
header {
  a {
    text-decoration: underline;
  }
}
</style>
